<!--项目起始页-->
<template>
  <div id="dashboard">
    <!-- 按需缓存需要缓存的页面，在router中设置router的元信息meta的keepAlive -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    <div id="tabbar">
      <van-tabbar v-model="active">
        <van-tabbar-item
          v-for="(item, index) in tabbars"
          replace
          :id="item.name == 'cart' ? 'shop-cart' : ''"
          :info="item.name == 'cart' ? goodsNum : ''"
          :icon="item.icon"
          :to={name:item.name}
          @click="handleTabClick(index)"
          :key="index"
          >{{ item.title }}</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  created() {
    // dom加载完成之前
    this.handleTabbarSelected(this.$route.name); // 通过路由跳转绑定Tabbar的选中
  },
  mounted() {
    // dom加载完成之后
    this._initData();
  },
  watch: {
    // 监听路由变化,保证路由跳转Tabbar选中正常
    $route: {
      handler(val) {
        this.handleTabbarSelected(val.name);
      },
    },
    deep: true,
  },
  computed: {
    // 计算属性,类似过滤器，对绑定的view的数据进行处理
    ...mapState(["shopCart"]),
    goodsNum() {
      let num = 0;
      Object.values(this.shopCart).forEach((goods, index) => {
        num += goods.num;
      });
      if (num > 0) {
        return num;
      }
    },
  },
  data() {
    return {
      currentIndex: 0,
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首页",
          icon: "wap-home",
        },
        {
          name: "category",
          title: "分类",
          icon: "wap-nav",
        },
        {
          name: "cart",
          title: "购物车",
          icon: "cart",
        },
        {
          name: "user",
          title: "我的",
          icon: "manager",
        },
      ],
    };
  },

  methods: {
    ...mapMutations(["INIT_USER_INFO", "INIT_SHOP_CART"]),
    // 页面加载初始化用户信息和购物车数据
    _initData() {
      this.INIT_USER_INFO();
      this.INIT_SHOP_CART();
    },
    // tab点击切换页面
    handleTabClick(index, tabName) {
      this.currentIndex = index;
    },
    // 监听路由变化，保证路由跳转Tabbar选中正常
    handleTabbarSelected(item) {
      const mapType = {
        home: 0,
        category: 1,
        cart: 2,
        user: 3,
      };
      this.active = mapType[item];
    },
  },
};
</script>

<style lanuage="less" scoped>
#dashboard {
  width: 100%;
}

.van-tabbar-item--active {
  color: #f75b52 !important;
}

.van-tabbar-item__icon {
  font-size: 20px;
}

.van-tabbar-item:active {
  background: #f6f6f6;
}

.van-tabbar-item__icon:active,
.van-tabbar-item__text:active {
  color: #f75b52;
}

.van-tabbar--fixed {
  z-index: 999;
}

.van-tabbar-item .van-icon-search {
  font-weight: 600;
}

#dashboard {
  padding-bottom: 50px;
}
</style>